<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="header_con">
	<div class="header">
		<div class="welcome fl">欢迎来到天天生鲜!</div>
		<div class="fr">
			{{if compare .username ""}}
				<div class="login_btn fl">
					<a href="/login">登陆</a>
					<span>|</span>
					<a href="/register">注册</a>
				</div>
			{{else}}
				<div class="login_btn fl">
					欢迎您：<em>{{.username}}</em>
					<span>|</span>
					<a href="/user/logout">退出</a>
				</div>
			{{end}}
			<div class="user_link fl">
				<span>|</span>
				<a href="/user/center_info">用户中心</a>
				<span>|</span>
				<a href="/user/cart">我的购物车</a>
				<span>|</span>
				<a href="user_center_order.html">我的订单</a>
			</div>
		</div>
	</div>
</div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="../static/images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<form action="/goodsSearch" method="post">
				<input type="text" class="input_text fl" name="searchVal" placeholder="搜索商品">
				<input type="submit" class="input_btn fr" name="" value="搜索">
			</form>
		</div>		
	</div>

	<div class="total_count">全部商品<em id="total_count_num">{{.goodsSize}}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	<form action="/user/showOrder" method="post">
		{{$ng := .nginx}}
		{{range .goods}}
			<ul class="cart_list_td clearfix">
				<li class="col01"><input type="checkbox" name="skuid" checked value="{{.goodsSku.Id}}"></li>
				<li class="col02"><img src="{{$ng}}/{{.goodsSku.Image}}"></li>
				<li class="col03">{{.goodsSku.Name}}<br><em>{{.goodsSku.Price}}元/{{.goodsSku.Unite}}</em></li>
				<li class="col04">{{.goodsSku.Unite}}</li>
				<li class="col05">{{.goodsSku.Price}}元</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:;" class="add fl">+</a>
						<input type="text" class="num_show fl" skuid = "{{.goodsSku.Id}}" value="{{.count}}">
						<a href="javascript:;" class="minus fl">-</a>
					</div>
				</li>
				<li class="col07">{{.allPrice}}元</li>
				<li class="col08"><a href="javascript:;" class = "deleteCart" skuid = "{{.goodsSku.Id}}">删除</a></li>
			</ul>
		{{end}}

		<ul class="settlements">
			<li class="col01"><input type="checkbox" name="" checked=""></li>
			<li class="col02">全选</li>
			<li class="col03">合计(不含运费)：<span>¥</span><em>{{.totalPrice}}</em><br>共计<b>{{.totalCount}}</b>件商品</li>
			<li class="col04"><input type="submit" value = "去结算"></li>
		</ul>
	</form>
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
</html>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../static/js/slide.js"></script>
<script type="text/javascript">
	function UpdateGoodsPrice() {
		totalCount = 0
		totalPrice = 0
		$('.cart_list_td').find(':checked').parents('ul').each(function () {
			count = $(this).find('.num_show').val()
			price = $(this).children('.col07').text()
			count = parseInt(count)
			price = parseFloat(price)

			//叠加
			totalCount += count
			totalPrice += price

		})
		$('.settlements').children('.col03').children('em').text(totalPrice)
		$('.settlements').children('.col03').children('b').text(totalCount)
	}
	//设置全选和全不选状态
	$('.settlements').find(':checkbox').change(function () {
		is_checked = $(this).prop('checked')
		$('.cart_list_td').find(':checkbox').each(function () {
			$(this).prop('checked', is_checked)
		})
		UpdateGoodsPrice()
	})
	//每个checkbox
	$('.cart_list_td').find(':checkbox').change(function () {

		checkboxLength = $('.cart_list_td').find(':checkbox').length
		checkedLength = $('.cart_list_td').find(':checked').length

		if (checkboxLength > checkedLength){
			$('.settlements').find(':checkbox').prop('checked', "")
		}else{
			$('.settlements').find(':checkbox').prop('checked', "checked")
		}

		UpdateGoodsPrice()
	})
	//func
	//+号实现
	$('.cart_list_td').find('.add').click(function () {
		count = $(this).next().val()
		count = parseInt(count) + 1

		skuid = $(this).next().attr('skuid')
		param = {"skuid":skuid, "count":count}
		totalPrice = 0
		$.ajaxSettings.async = false
		$.post("/user/updateCart", param, function (data) {
			if (data.code == 5){
				errUpdate = false
			}else{
				alert(data.msg)
				errUpdate = true
			}
		})
		$.ajaxSettings.async = true

		if (!errUpdate){
			$(this).val(count)
			price = $(this).parents("ul").children('.col05').text()
			price = parseFloat(price)
			amount = price * count
			$(this).parents('ul').find('.col07').html(amount.toFixed(2) + "元")
			$(this).next().val(count)
		}
		is_checked = $(this).parents("ul").find(":checkbox").prop('checked')
		if (is_checked){
			UpdateGoodsPrice()
		}
	})
	//func
	//-号实现
	$('.cart_list_td').find('.minus').click(function () {
		count = $(this).prev().val()
		count = parseInt(count) - 1

		if (count < 1){
			count = 1
			return true
		}
		skuid = $(this).prev().attr('skuid')
		param = {"skuid":skuid, "count":count}
		totalPrice = 0
		$.ajaxSettings.async = false
		$.post("/user/updateCart", param, function (data) {
			if (data.code == 5){
				errUpdate = false
			}else{
				alert(data.msg)
				errUpdate = true
			}
		})
		$.ajaxSettings.async = true
		if (!errUpdate){
			$(this).val(count)
			price = $(this).parents("ul").children('.col05').text()
			price = parseFloat(price)
			amount = price * count
			$(this).parents('ul').find('.col07').html(amount.toFixed(2) + "元")
			$(this).prev().val(count)
		}
		is_checked = $(this).parents("ul").find(":checkbox").prop('checked')
		if (is_checked){
			UpdateGoodsPrice()
		}
	})

	preCount = 0
	$('.num_show').focus(function () {
		preCount = $('.num_show').val()
	})
	//func
	//手动输入数量
	$('.num_show').bind('input porpertychange',function(){
		count = $(this).val()
		if (isNaN(count) || count.trim().length == 0 || parseInt(count) < 1){
			count = preCount
			$(this).val(count)
			return
		}


		skuid = $(this).attr('skuid')
		param = {"skuid":skuid, "count":count}
		$.ajaxSettings.async = false
		$.post('/user/updateCart', param, function (data) {
			if (data.code == 5) {
				//totalPrice = data.price
				errUpdate = false
			}else{
				errUpdate = true
			}
		})
		$.ajaxSettings.async = true

		if (!errUpdate){
			$(this).val(count)
			price = $(this).parents("ul").children('.col05').text()
			price = parseFloat(price)
			amount = price * count
			$(this).parents('ul').find('.col07').html(amount.toFixed(2) + "元")
			$(this).prev().val(count)
		}
		is_checked = $(this).parents("ul").find(":checkbox").prop('checked')
		if (is_checked){
			UpdateGoodsPrice()
		}
	});
	$('.deleteCart').click(function () {
		skuid = $(this).attr("skuid")
		param = {"skuid":skuid}
        $.ajaxSettings.async = false
		$.post('/user/deleteCart', param, function (data) {
            if (data.code == 5){
            	carLen = data.carLen
                errUpdate = false
            }else{
                errUpdate = true
                alert(data.msg)
            }
		})
		$.ajaxSettings.async = true
        if (!errUpdate){
            $(this).parents("ul").remove()

			$("#total_count_num").text(carLen)

			is_checked = $(this).parents("ul").find(":checkbox").prop('checked')
			if (is_checked){
				UpdateGoodsPrice()
			}


        }


	})
</script>